<template lang="pug">
section.q-my-sm.q-mr-md.cursor-pointer.text-subtitle1(:id="slugifiedTitle", @click="copyHeading(slugifiedTitle)")
  div.doc-card-title {{ title }}
</template>

<script>
import { copyHeading } from 'assets/page-utils'

export default {
  name: 'DocHeading',

  props: {
    title: String,
    slugifiedTitle: String,
    prefix: String
  },

  methods: {
    copyHeading
  }
}
</script>

<style lang="stylus">
$title-color = $grey-4

.doc-card-title
  margin-left -24px
  padding 2px 10px 2px 24px
  background $title-color
  color $grey-8
  position relative
  border-radius 3px 5px 5px 0

  &:after
    content ''
    position absolute;
    top 100%
    left 0
    width 0
    height 0
    border 0 solid transparent
    border-top-color darken($title-color, 15%)
    border-width 9px 0 0 11px
</style>
